<!-- 我的留言  -->
<template>
  <s-layout title="全部留言">
	  <!--商品ID搜索 包裹暂时不开放-->
	  <uni-search-bar
			  class="ss-flex-1"
			  radius="33"
			  placeholder="请输入商品ID搜索留言"
			  cancelButton="none"
			  @confirm="onSearch($event)"
	  />
	  <view class="cicon-notice"
	        style="padding: 10px;
	          margin: 5px;
	          width: 90%;
	          background-color: #F39800;
	          border-radius: 10px; color: #FFFFFF;">
		  <text>点击商品ID查看商品最新留言详情</text>
	  </view>
    <su-tabs
      :list="tabMaps"
      :scrollable="false"
      @change="onTabsChange"
      :current="state.currentTab"
    ></su-tabs>
    <view class="ss-m-t-20">
      <view class="list-item" v-for="item in state.pagination.data" :key="item">
        <comment-item-user :page-type="'list'" :item="item"></comment-item-user>
      </view>
    </view>
    <s-empty v-if="state.pagination.total === 0" text="暂无留言" icon="/static/data-empty.png" />
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
  </s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {reactive} from 'vue';
import _, {clone} from "lodash";
import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import SuTabs from "@/sheep/ui/su-tabs/su-tabs.vue";
import CommentItemUser from "@/pages/index/components/comment-item-user.vue";

const pagination = {
	data: [],
	page: 1,
	total: 0,
	size: 10
};
// 数据
const state = reactive({
	currentTab: 0,
	isAllSelected: false,
	pagination: {
		data: [],
		page: 1,
		productId: '',
		total: 0,
		size: 10
	},
	loadStatus: '',
	deleteOrderId: 0,
	error: 0,
});

// 选择留言
const onSelect = (addressInfo) => {

};

const tabMaps = [
	/*{
		name: '审核中',
		value: 0,
	},*/
	{
		name: '已发布',
		value: 1,
	},
	{
		name: '发布失败',
		value: 2,
	},
	/*{
		name: '审核拒绝',
		value: -1,
	}*/
];


// 切换选项卡
function onTabsChange(e) {
	if (state.currentTab === e.index) return;

	state.pagination = clone(pagination);
	state.currentTab = e.index;
	state.pagination.data = []
	getList();
}

// 获取订单列表
async function getList() {
	state.loadStatus = 'loading';
	let res = await sheep.$api.goods.getPlatformComments({
		pageNum: state.pagination.page,
		pageSize: state.pagination.size,
		productId: state.pagination.productId,
		createBy: sheep.$store('user').userInfo.id,
		status: tabMaps[state.currentTab].value
	});
	const {rows, total} = res;
	state.pagination.data = _.concat(state.pagination.data, rows);
	state.pagination.total = total
	// 判断是否还有下一页
	if (state.pagination.total <= state.pagination.data.length) {
		state.loadStatus = 'noMore';
	} else {
		state.loadStatus = 'more';
		state.pagination.page++;
	}
}

onLoad(async (options) => {
	getList();
});

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		state.pagination.page++
		getList();
	}
}

// 上拉加载更多
onReachBottom(() => {
	loadmore();
});

function onSearch(e) {
	console.log(e.value)
	state.pagination.productId = e.value
	state.pagination.data = []
	state.pagination.page = 1
	getList()
}

//下拉刷新
onPullDownRefresh(() => {
	state.pagination = clone(pagination);
	getList();
	setTimeout(function () {
		uni.stopPullDownRefresh();
	}, 800);
});

function reloadData() {
	state.pagination = clone(pagination)
	getList()
}

</script>

<style lang="scss" scoped>
  .list-item {
    padding: 32rpx 30rpx 20rpx 20rpx;
    background: #fff;
    .avatar {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
    }
    .nickname {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
    }
    .create-time {
      font-size: 24rpx;
      font-weight: 500;
      color: #c4c4c4;
    }
    .content-title {
      font-size: 26rpx;
      font-weight: 400;
      color: #666666;
      line-height: 42rpx;
    }
    .content-img {
      width: 174rpx;
      height: 174rpx;
    }
    .cicon-info-o {
      font-size: 26rpx;
      color: #c4c4c4;
    }
    .foot-title {
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }
  }

  .btn-box {
    width: 100%;
    height: 120rpx;
    background: #fff;
    border-top: 2rpx solid #eee;
  }
  .tab-btn {
    width: 130rpx;
    height: 62rpx;
    background: #eeeeee;
    border-radius: 31rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    border: 1px solid #e5e5e5;
    margin-right: 10rpx;
  }
</style>
